<template>
  <div class="expert-detail">
    <top-header></top-header>
    <div class="common-list-body" v-fullheight>
      <div class="title">
        <span class="columns-title">基本信息</span>
      </div>
      <ul>
        <li>
          <span class="name">专家姓名</span>
          <span class="text">{{ detail.name }}</span>
        </li>
        <li>
          <span class="name">最高学历</span>
          <span class="text">{{ education[detail.education] }}</span>
        </li>
        <li>
          <span class="name">专业</span>
          <span class="text">{{ detail.profession }}</span>
        </li>
        <li>
          <span class="name">最高职称</span>
          <span class="text">{{ professionalTitle[detail.professionalTitle] }}</span>
        </li>
        <li @click="makeCall">
          <span class="name">手机号码</span>
          <span class="text">{{ detail.phonenumber }}</span>
        </li>
        <li>
          <span class="name">专业类别</span>
          <span class="text">{{ detail.professionCategoryName }}</span>
        </li>
        <li>
          <span class="name">现所在单位</span>
          <span class="text">{{ detail.currentCompany }}</span>
        </li>
        <li>
          <span class="name">常用检索标签</span>
          <span class="text">{{ detail.commonSearchTags }}</span>
        </li>
      </ul>
      <!-- <van-collapse v-model="collapseActive" class="certificate-info" v-if="detail.bmsExpertCertifications && detail.bmsExpertCertifications.length"> -->
      <van-collapse v-model="collapseActive" class="certificate-info">
        <van-collapse-item name="certificate">
          <template #title>
            <span class="columns-title">专家持证信息</span>
          </template>
          <!-- 没有证件数据不显示右侧icon -->
          <template #right-icon v-if="!detail.bmsExpertCertifications || detail.bmsExpertCertifications.length === 0">
            <span></span>
          </template>

          <!-- 有证件数据，修改右侧icon边上的文案 -->
          <template #value v-if="detail.bmsExpertCertifications && detail.bmsExpertCertifications.length">
            <span class="">{{ collapseActive.indexOf("certificate") > -1 ? "收起" : "展开" }}</span>
          </template>

          <!-- 没有证件数据右侧显示暂无信息 -->
          <template #value v-else>
            <span class="empty">暂无信息</span>
          </template>

          <div class="cert-list" v-for="(item, key) in detail.bmsExpertCertifications" :key="key">
            <div>
              <span class="name">专家持证情况</span>
              <span class="text">{{ expertCertType[item.type] }}</span>
            </div>
            <div>
              <span class="name">专业</span>
              <span class="text">{{ item.expertProfession }}</span>
            </div>
          </div>
        </van-collapse-item>
      </van-collapse>
    </div>
  </div>
</template>

<script lang="ts">
import { Component } from "vue-property-decorator";
import TopHeader from "@/components/TopHeader.vue";
import Base from "@/utils/base";
import { Collapse, CollapseItem } from "vant";
import Enum from "@/typings/Enum";

@Component({
  name: "ExpertDetail",
  components: {
    TopHeader,
    VanCollapse: Collapse,
    VanCollapseItem: CollapseItem
  }
})
export default class ExpertDetail extends Base {
  private detail: any = {};
  private collapseActive = ["certificate"];
  private expertCertType = Enum.ExpertCertType;
  private education = Enum.Education;
  private professionalTitle = Enum.ProfessionalTitle;

  private created() {
    const expertDetail = localStorage.getItem("expertDetail");
    const guid = this.$route.query.guid || "";
    if (expertDetail && guid) {
      this.detail = JSON.parse(expertDetail);

      if (guid !== this.detail.guid) {
        this.$dialog
          .alert({
            message: "请从专家列表重新进入"
          })
          .then(() => {
            this.$router.replace({ name: "Expert" });
          });
      }
    }
  }

  private makeCall() {
    window.location.href = `tel:${this.detail.phonenumber}`;
  }
}
</script>

<style lang="less" scoped>
.expert-detail {
  .title {
    background-color: #e5f5ff;
    padding: 8px 0px 8px 20px;
    padding-left: 20px;
    position: relative;
    display: flex;
    justify-content: space-between;

    .right {
      padding: 0 15px;
    }
  }

  .columns-title {
    position: relative;
    color: #69b9fc;
    font-size: 13px;
    // line-height: 18px;
    display: inline-block;

    &::after {
      content: "";
      position: absolute;
      height: 11px;
      width: 2px;
      background-color: #69b9fc;
      left: -6px;
      top: 50%;
      transform: translateY(-50%);
      // top: 4px;
    }
  }
  li {
    padding: 12px 12px;
    position: relative;
    background-color: white;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    color: #2c3038;
    &::after {
      position: absolute;
      content: "";
      bottom: 0;
      right: 0;
      left: 20px;
      border-bottom: 1px solid #e4e4e4;
      transform: scaleY(0.5);
    }
    &:last-child::after {
      content: none;
    }
  }

  .name {
    width: 100px;
    font-size: 16px;
  }
  .text {
    text-align: right;
    flex: 1;
    line-height: 22px;
    color: #797f89;
  }

  .certificate-info.van-collapse {
    &::after {
      content: none;
    }
    /deep/.van-cell {
      background-color: #e5f5ff;
      padding: 8px 20px;
      line-height: 18px;
    }
    /deep/.van-cell__right-icon {
      color: #69b9fc;
      line-height: 18px;
      height: auto;
    }
    /deep/.van-collapse-item__content {
      background-color: transparent;
      padding: 12px 0px;
    }
    /deep/.van-cell::after {
      content: none;
    }
    /deep/.van-cell__value {
      font-size: 13px;
      color: #69b9fc;
    }
    .empty {
      color: #aaaaaa;
    }
  }

  .cert-list {
    margin: auto 12px;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    box-shadow: 0px 2px 8px 0px rgba(183, 200, 224, 0.5);
    overflow: hidden;
    margin-bottom: 10px;
    & > div {
      padding: 12px 12px;
      position: relative;
      background-color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #2c3038;
    }
  }

  /deep/.van-collapse-item__wrapper {
    background-color: white;
  }
}
</style>
